<template>
    <div>
        <div>{{ $route.meta.title }}</div>
        <button @click="changeNum">changeNum</button>
        <div>{{ num }}</div>
        <button @click="changeStr">changeStr</button>
        <div>{{ str }}</div>
        <button @click="changeUser">changeUser</button><br>
        <button @click="changeObj">changeObj</button>
        <div>{{ user }}</div>
        <div>{{ user.name | filterName }}</div>
        <div>{{ num | toTwo(3) }}</div>
        <div>{{ toAddTwo }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            str: 'haha',
            num: 1,
            user: {
                name: 'zhangsan',
                age: 18,
                sex: '男',
                obj: {
                    a: '1',
                    b: '2',
                    c: '3'
                }
            }
        }
    },
    methods: {
        changeNum() {
            this.num++
        },
        changeStr() {
            this.str = 'hehe'
        },
        changeUser() {
            this.user.name = 'lisi'
        },
        changeObj() {
            this.user.obj.a = '4'
        }
    },
    watch: {
        num: {
            handler(newVal, oldVal) {
                console.log(newVal, oldVal)
            },
            immediate: true
        },
        str: {
            handler(newVal, oldVal) {
                console.log(newVal, oldVal)
            }
        },
        user: {
            handler(newVal, oldVal) {
                console.log(newVal, oldVal)
            },
            // deep: true
        }
    },
    filters: {
        filterName(val) {
            return val.toUpperCase()
        }
    },
    computed: {
        toAddTwo(x) {
            console.log('computed',x==this);
            return this.num + 2
        }
    }
}
</script>
<style></style>
